<template>
  <div class="stats-trend-analysis">
    <el-card>
      <div class="trend-header">
        <span class="trend-title">主要业务年度趋势对比</span>
        <el-select v-model="selectedType" style="width:150px;margin-left:18px;">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="selectedYear" style="width:110px;margin-left:12px;">
          <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year" />
        </el-select>
      </div>
      <div ref="trendRef" class="trend-chart"></div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

// 业务类型、年度选项
const typeOptions = [
  { label: '修复项目数', value: 'project' },
  { label: '废弃物利用量', value: 'waste' },
  { label: '绿色建筑新增', value: 'green' }
]
const yearOptions = ['2022', '2023', '2024']
const selectedType = ref('project')
const selectedYear = ref('2024')

// 各年数据（按月，模拟）
const dataMap: Record<string, Record<string, number[]>> = {
  project: {
    '2022': [2, 2, 3, 3, 4, 5, 5, 4, 3, 3, 2, 2],
    '2023': [3, 3, 4, 5, 6, 7, 6, 5, 4, 3, 3, 2],
    '2024': [2, 3, 5, 6, 7, 8, 6, 5, 4, 3, 3, 2]
  },
  waste: {
    '2022': [800, 1100, 1300, 1700, 1800, 1900, 2000, 1800, 1700, 1500, 1400, 1300],
    '2023': [1100, 1500, 1800, 2100, 2200, 2300, 2200, 2100, 1900, 1700, 1600, 1500],
    '2024': [1200, 1800, 2400, 2600, 2700, 3000, 2800, 2700, 2200, 2100, 2000, 2000]
  },
  green: {
    '2022': [1, 1, 2, 1, 2, 2, 1, 2, 2, 2, 1, 1],
    '2023': [2, 2, 2, 2, 3, 2, 2, 2, 2, 2, 2, 2],
    '2024': [1, 2, 2, 2, 2, 3, 2, 2, 1, 2, 1, 1]
  }
}
const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

const trendRef = ref<HTMLDivElement>()
function renderTrendChart() {
  if (trendRef.value) {
    const chart = echarts.init(trendRef.value)
    // 对比3年同类型，或单年多指标趋势
    const seriesList = yearOptions.map(year => ({
      name: year,
      type: 'line',
      data: dataMap[selectedType.value][year],
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      lineStyle: { width: 4 },
      itemStyle: { color: ['#409EFF','#67C23A','#E6A23C'][yearOptions.indexOf(year)] }
    }))
    chart.setOption({
      tooltip: { trigger: 'axis' },
      legend: { top: 10, data: yearOptions },
      grid: { left: 38, right: 24, top: 44, bottom: 32 },
      xAxis: { type: 'category', data: months, axisLabel: { color: '#666' } },
      yAxis: { type: 'value', axisLabel: { color: '#888' } },
      series: seriesList
    })
    window.addEventListener('resize', () => chart.resize())
  }
}
onMounted(renderTrendChart)
watch([selectedType, selectedYear], renderTrendChart)
</script>

<style scoped>
.stats-trend-analysis {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.trend-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.trend-title {
  font-size: 18px;
  font-weight: bold;
  color: #308d2d;
}
.trend-chart {
  width: 100%;
  min-height: 480px;
  height: 58vh;
}
</style>
